import React, {
  Component
} from 'react';
import { Form, Input, Button, Select, notification, message } from 'antd';
const FormItem = Form.Item;
import './index.less';
import { connect } from 'react-redux';
import store from '../../../redux/index';
import axios from 'axios';

const Option = Select.Option;

class MenuManager extends Component {
  constructor(props) {
    super(props);
    this.state = {
      intData: []
    };
  }
    // 提示框
    openNotification = (type, Message, Description) => {
      notification[type]({
        message: Message,
        description: Description
      });
    };


  // 保存菜单
    handleSubmitSave = (e) => {
      const _this = this;
      const Token = sessionStorage.getItem('token');
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (!err) {
          axios.post('/api/admin/menu/', values, {
            headers: {
              'Content-Type': 'application/json',
              Authorization: Token
            }
          })
            .then(function(response) {
              if (response.data.status == 200) {
                _this.openNotification('success', '成功', '创建成功');
              }
              _this.props.updataMenu('SaveOk');
            })
            .catch(function(error) {
              console.log(error);
              message.error('服务器开小差啦，请重试！');
            });
        }
      });
      this.clearValue(this.props.ID);
      this.props.form.resetFields();

    }
  // 清除form value值
    clearValue(ID) {
      var storeData = store.getState().changeBtnsStatus.MenuData;
      if (ID) {
        storeData = {
          attr1: '',
          code: '',
          description: '',
          href: '',
          icon: '',
          id: '',
          order_num: '',
          parentId: ID,
          path: '',
          title: '',
          type: '',
        };
      } else {
        storeData = {
          attr1: '',
          code: '',
          description: '',
          href: '',
          icon: '',
          id: '',
          order_num: '',
          parentId: '-1',
          path: '',
          title: '',
          type: '',
        };
      }
      store.dispatch({ type: 'changeMenuData', MenuData: storeData });
    }

    // 菜单更新
    handleSubmitUpate = (e) => {
      const _this = this;
      e.preventDefault();
      // console.log(this.props.ID)
      this.props.form.validateFields((err, values) => {
        values.id = this.props.ID;
        if (!err) {
          // console.log('Received values of form: ', values);
          const Token = sessionStorage.getItem('token');
          axios.put('/api/admin/menu/' + this.props.ID, values, {
            headers: {
              'Content-Type': 'application/json',
              Authorization: Token
            }
          })
            .then(function(response) {
              if (response.data.status == 200) {
                _this.openNotification('success', '成功', '更新成功');
              }
              // console.log('菜单更新--------');
              _this.props.updataMenu('UpDateOk');
            })
            .catch(function(error) {
              console.log(error);
              message.error('服务器开小差啦，请重试！');
            });
        }
      });
      this.clearValue(this.props.ID);
      this.props.form.resetFields();
    }

    render() {
      const {
        getFieldDecorator
      } = this.props.form;
      const FromData = this.state.intData;
      const parentIdOff = this.props.oData.parentIdOff;
      const parentIdValue = this.props.oData.parentID;

      const formItemLayout = {
        labelCol: {
          xs: {
            span: 3
          },
          sm: {
            span: 3
          },
        },
        wrapperCol: {
          xs: {
            span: 21
          },
          sm: {
            span: 21
          },
        },
      };

      return (
        <div className="MenuManager">
          <Form className="MenuManagerForm">
            <FormItem
              label="路径编码"
              {...formItemLayout}
            >
              {getFieldDecorator('code', {
                rules: [{ required: true, message: '请输入路径编码' }],
                initialValue: store.getState()['changeBtnsStatus'].MenuData.code

              })(
                <Input type="text" placeholder="请输入路径编码" disabled={store.getState()['changeBtnsStatus'].BtnsStatus} />
              )}
            </FormItem>
            <FormItem
              label="标题"
              {...formItemLayout}
            >
              {getFieldDecorator('title', {
                rules: [{ required: true, message: '请输入标题' }],
                initialValue: store.getState()['changeBtnsStatus'].MenuData.title
              })(
                <Input type="text" placeholder="请输入标题" disabled={store.getState()['changeBtnsStatus'].BtnsStatus} />
              )}
            </FormItem>
            <FormItem
              label="父级节点"
              {...formItemLayout}
            >
              {getFieldDecorator('parentId', {
                initialValue: store.getState()['changeBtnsStatus'].MenuData.parentId,
                rules: [{ required: true, message: '请输入父级节点' }],
              })(
                <Input type="text" disabled={store.getState()['changeBtnsStatus'].BtnsStatus} placeholder="请输入父级节点" />
              )}
            </FormItem>
            <FormItem
              label="图标"
              {...formItemLayout}
            >
              {getFieldDecorator('icon', {
                rules: [{ required: true, message: '请输入图标' }],
                initialValue: store.getState()['changeBtnsStatus'].MenuData.icon,
              })(
                <Input placeholder="请输入图标" disabled={store.getState()['changeBtnsStatus'].BtnsStatus} />
              )}
            </FormItem>
            <FormItem
              label="资源路径"
              {...formItemLayout}
            >
              {getFieldDecorator('href', {
                rules: [{ required: true, message: '请输入资源路径' }],
                initialValue: store.getState()['changeBtnsStatus'].MenuData.href
              })(
                <Input placeholder="请输入资源路径" disabled={store.getState()['changeBtnsStatus'].BtnsStatus} />
              )}
            </FormItem>
            <FormItem
              label="类型"
              {...formItemLayout}
            >
              {getFieldDecorator('type', {
                rules: [{ required: true, message: '请输入类型' }],
                initialValue: store.getState()['changeBtnsStatus'].MenuData.type
              })(
                <Select style={{ width: 180 }} disabled={store.getState()['changeBtnsStatus'].BtnsStatus} placeholder="请输入资源请求类型">
                  <Option value="menu">menu</Option>
                  <Option value="dirt">dirt</Option>
                </Select>
              )}
            </FormItem>
            <FormItem
              label="排序"
              {...formItemLayout}
            >
              {getFieldDecorator('order_num', {
                rules: [{ required: false, message: '请输入排序' }],
              })(
                <Input placeholder="请输入排序" type="number" disabled={store.getState()['changeBtnsStatus'].BtnsStatus} />
              )}
            </FormItem>
            <FormItem
              label="描述"
              {...formItemLayout}
            >
              {getFieldDecorator('description', {
                rules: [{ required: false, message: '请输入描述' }],
                initialValue: store.getState()['changeBtnsStatus'].MenuData.description
              })(
                <Input placeholder="请输入描述" disabled={store.getState()['changeBtnsStatus'].BtnsStatus} />
              )}
            </FormItem>
            <FormItem
              label="前端组件"
              {...formItemLayout}
            >
              {getFieldDecorator('attr1', {
                rules: [{ required: true, message: '请输入前端组件' }],
                initialValue: store.getState()['changeBtnsStatus'].MenuData.attr1
              })(
                <Input placeholder="请输入前端组件" className="signInput" disabled={store.getState()['changeBtnsStatus'].BtnsStatus} />
              )}
            </FormItem>
            {store.getState()['changeBtnsStatus'].BtnsShowStatus ? null
              : <div className="Btns">
                <Button type="primary" htmlType="submit" onClick={this.handleSubmitSave}>保存</Button>
                <Button>取消</Button>
              </div>
            }

            {store.getState()['changeBtnsStatus'].BtnsUpate ?
              <div className="Btns">
                <Button type="primary" htmlType="submit" onClick={this.handleSubmitUpate}>更新</Button>
                <Button>取消</Button>
              </div>
              : null
            }

          </Form>
        </div>
      );
    }
}
const MenuManagerForm = Form.create()(MenuManager);
export default connect((state) => {
  return { ...state };
})(MenuManagerForm);